<template>
    <div id='login'>
        <!-- <img src="../assets/img/login-bg2.jpg" alt="" srcset=""> -->
        <div class="login">
            <h3>用&nbsp;户&nbsp;登&nbsp;录</h3>
            <br>
            <div class="input">
                <el-input placeholder="用户名" v-model="username" clearable>
            </el-input>
            </div>
            <br>
            <div class="input">
                <el-input placeholder="密码" v-model="pwd" show-password></el-input>
            </div>
            <br>
            <div class="btn">
                <el-button plain @click="login">登&nbsp;录</el-button>
            </div>
            
        </div>
    </div>
</template>

<style lang="stylus" scoped>
    #login{
            background-image:url('../assets/img/login-bg2.jpg');
            background-size: 100% 100%;
            height: 100%;
            position: fixed;
            width: 100%
    }

    h3{
        text-align :center
    }
    .login{
        width :300px;
        padding :50px 20px;
        position relative;
        left :50%;
        top:50%;
        margin-left :-170px;
        margin-top :-155px;
        background :rgba(185, 185, 185, 0.5);
    }
    .btn button{
        width :100%;
    }
</style>
<script>
import Store from '../Vuex/store'
export default {
    //el:"#login",
    name:'login',
    data(){
        return {
            username:"admin",
            pwd:"123"
        }
    },
    methods:{
        login:function(){
            //用户名是否为空
            if(this.username==null || this.username==""){
                this.$alert('用户名不存在', '消息');
               return;
            }
            //密码是否为空
            if(this.pwd==null || this.pwd==""){
                this.$alert('密码不能为空','消息')
                return;
            }
            //访问登录接口
            let _this=this;
            this.$post('/api/Login/Login',{
                username:this.username,
                password: this.pwd
            }).then((res)=>{
                console.log(res);
                //如果成功
                if(res.code==0){
                    _this.userToken=res.data.token;
                    //将用户token保存到vuex中
                   Store.commit('changaLogin',_this.userToken);
                   this.$router.push('/');//跳转
                }else{
                    this.$alert(res.msg,'消息');
                }
            }).catch((err)=>{
                console.log(err);
            })

        }
    }
}
</script>
